<template>
  <div id="homeclasses">
    <!-- 添加页面弹框 -->
      <el-dialog title="添加班级" :visible.sync="addvisible" width="400px">
      <el-form label-width="80px" label-position="left">
        <el-form-item label="班级名称">
          <el-input v-model="addClassesName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addSave()">保存</el-button>
          <el-button @click="addvisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 编辑页面弹框 -->
    <el-dialog title="编辑" :visible.sync="editvisible" width="400px">
      <el-form label-width="80px" label-position="left">
        <el-form-item label="班级名称">
          <el-input v-model="editClassesName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="editSave()">保存</el-button>
          <el-button @click="editvisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 主体部分 -->
    <el-card :body-style="{ padding: '20px' }" shadow="never">
      <div slot="header">班级管理
        <el-button type="primary" size="mini" @click="add" icon="el-icon-plus">添加</el-button>
      </div>
      <!-- card body -->
      <div style="margin: 20px 0px;">
        <el-input placeholder="请输入内容" class="input-with-select" v-model="fieldVal">
          <el-select v-model="field" slot="prepend" placeholder="请选择" style="width:120px;">
            <el-option label="班级名称" value="class_name"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </div>
      <el-table :data="classes" v-loading="loading" :border="true">
        <el-table-column prop="class_name" label="班级名称"></el-table-column>
        <el-table-column prop="ctime" label="创建日期" :formatter="formatCtime"></el-table-column>
        <el-table-column prop="mtime" label="更新日期" :formatter="formatMtime"></el-table-column>
        <el-table-column label="操作">
          <div slot-scope="{row}">
            <el-button size="mini" type="primary" @click="edit(row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="del(row.id)">删除</el-button>
          </div>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top:20px"
        background
        layout="prev, pager, next,sizes"
        :total="total"
        :page-size="pageSize"
        :current-page.sync="currentPage"
        @current-change="currentChange()"
        :page-sizes="[4,5,10,30]"
        @size-change="sizeChange"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import moment from "moment"
export default {
  data() {
    return {
      addvisible:false,
      editvisible:false,
      addClassesName:'',
      editClassesName:'',
      editid:'',
      classes: [],
      pageSize: 4,
      currentPage: 1,
      total: 0,
      pageNum: 0,
      loading: false,
      field: "class_name",
      fieldVal: ""
    };
  },
  created() {
    this.getclasses();
  },
  methods: {
    formatCtime(row){
     return moment(row.ctime).format("YYYY-MM-DD HH:mm:ss")
    },
     formatMtime(row){
     return moment(row.mtime).format("YYYY-MM-DD HH:mm:ss")
    },
    del(id) {
      this.$alert("确定删除吗？", "提示", {
        confirmButtonText: "确定"
      }).then(() => {
        this.axios
          .delete(`/classes/del/${id}`)
          .then(() => {
            this.$message.success('删除成功！')
            this.getclasses();

          }).catch(()=>{
            this.$message.error('删除失败！')
          })
         
      }).catch(()=>{});
    },
    add() {
     this.addvisible=true
    },
    edit(data){
      this.editvisible=true;
      this.editid=data.id;
      this.axios.get(`/classes/${data.id}`).then((ret)=>{
        let {data,error}=ret.data
        this.editClassesName=data.class_name
      }).catch(()=>{
         this.$message.error("编辑失败");
      })
    },
    addSave() {
      this.axios
        .post("/classes/add", {
          class_name: this.addClassesName,
        })
        .then(() => {
          this.getclasses();
          this.addvisible = false;
          this.$message.success("添加成功");
        });
    },
    editSave(){
       this.axios
        .post(`/classes/edit/${this.editid}`, {
          class_name: this.editClassesName,
        })
        .then(() => {
          this.getclasses();
          this.addvisible = false;
          this.$message.success("编辑成功");
        });
    },
    search() {
      this.getclasses();
    },
    currentChange() {
      this.getclasses();
    },
    sizeChange(size) {
      console.log(size);
      this.pageSize = size;
      this.getclasses();
    },
    getclasses() {
      this.loading = true;
      this.axios
        .get("/classes", {
          params: {
            field: this.field,
            fieldVal: this.fieldVal,
            pageSize: this.pageSize,
            currentPage: this.currentPage
          }
        })
        .then(ret => {
          this.loading = false;
          let { error, data } = ret.data;
          this.classes = data.rows;
          this.total = data.total;
          this.pageNum = Math.ceil(data.total / data.pageSize);
        })
        .catch(() => {});
    }
  }
};
</script>

<style>
</style>